<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/list.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="../css/detail.css">
<style type="text/css">
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">详情</h1>
</header>
    <div class="mui-content" id="pullrefresh">
      <div id="neirong" class="mui-content-padded">
      	<!--详情信息-->
     	</div>
     	<div id="relation">
     		<!--关联信息-->
     	</div>
     	<li class="mui-content-padded"style="border-bottom: 1px solid #E3E3E3;">主题评论：</li>
		<div class="mui-content-padded" id="comment">
			 <!--评论信息-->
		</div>
</div>
<!--评论窗口-->
    <div  id="fabiao" style="display:block;position:fixed;right:30px;bottom:60px;background: #DD524D;color:#fff;border-radius:10px;padding: 5px;" >发表评论
</div>
<div id="speak" class="speak" style="display:none;background: #DDDDDD;">
	<p style="margin:auto auto;font-size: 1.2em;color:#EC971F">发表评论</p>
	<textarea id="content" type="text" placeholder="留言"></textarea>
	<div style="margin-top: -24px;border-radius:5px;">
	<input id="pubish" style="font-size: 18px;margin: 2px 5px;padding:0 10px;float: right;" value="确认" type="submit" onclick="javascript:(document.getElementById('fabiao').style.display='block')">
	<input  style="font-size: 18px;margin: 2px 5px;float: right;padding:0 10px;" value="取消" type="submit" onclick="javascript:(document.getElementById('speak').style.display='none');javascript:(document.getElementById('fabiao').style.display='block')">
	</div>
</div>
<script src="../../js/app.js"></script>
<script src="../../js/mui.min.js"></script>
<!--<script src="../js/common.js"></script>-->
<script src="../../js/common.js"></script>
<script type="text/javascript">
var btn = document.getElementById("fabiao");
//监听点击事件
btn.addEventListener("tap",function () {
	 speak('',tid,'microblog');
//	alert(tid);
  console.log("tap event trigger"+tid);
});
//	   apptoken['tid']=localStorage.microblogtid;//获取详情id

//图片单击大图控制插件
mui.plusReady(function() {
      var loopFlag = false; //默认不支持轮播
      var loopSwitch = document.getElementById('neirong');
      loopSwitch.addEventListener('toggle', function(event) {
        if(event.detail.isActive) {
          loopFlag = true;
        } else {
          loopFlag = false;
        }
      });
      var images = [].slice.call(document.querySelectorAll('.pic img'));
      var urls = [];
      images.forEach(function(item) {
        urls.push(item.src);
      });
      mui('.pic').on('tap', 'img', function() {
        var index = images.indexOf(this);
        plus.nativeUI.previewImage(urls, {
          current: index,
          loop: loopFlag,
          indicator: 'number'
        });
      });
});

////发布回复输入框控制
//function speak(username,tid){
//	document.getElementById('speak').style.display='block';//显示输入框
//	document.getElementById('fabiao').style.display='none';//隐藏发布按钮
//	var tid=tid||'';
//	var username=username ||'';
//	document.getElementById('content').value='';//赋值提示信息
//	if(tid==''){//判断tid是否为空，空=回复主题帖；存在id=等于给评论回复
//		document.getElementById('content').placeholder='您正在对主题进行评论';//赋值提示信息
//		document.getElementById('pubish').onclick=function(){
//			document.getElementById('speak').style.display='none';//隐藏发布按钮
//			document.getElementById('fabiao').style.display='block';//隐藏发布按钮
//			pubish_comment()}
//	}else{
//		document.getElementById('content').placeholder='您正在对：'+username+'进行回复';//赋值提示信息
//		document.getElementById('pubish').onclick=function(){
//			document.getElementById('speak').style.display='none';//隐藏发布按钮
//			document.getElementById('fabiao').style.display='block';//隐藏发布按钮
//			pubish_reply(tid)}
//	}
//} 
mui.init({  
		pullRefresh: {  
		container: '#pullrefresh', //触发刷新功能的id标签
		up : {//触发上拉
		range:'100px', //可选 默认100px,控件可下拉拖拽的范围
     	offset:'50px', //可选 默认0px,下拉刷新控件的起始位置
		contentrefresh : "正在加载评论...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
		contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
		callback :pullupRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
	}
              }  
          });  
//* 下拉刷新具体业务实现 
function pulldownRefresh() { 
	setTimeout(function () { 
	//刷新评论数据
		list_comment(tid,'microblog',0);
	mui('#pullrefresh').pullRefresh().endPulldownToRefresh();//关闭上拉刷新样式
	}, 1500);  //1500毫秒触发
} 
 //* 下拉刷新具体业务实现 
function pullupRefresh() { 
	setTimeout(function () { 
		//获取更多评论数据
		list_comment(tid,'microblog',1);
	mui('#pullrefresh').pullRefresh().endPullupToRefresh();//关闭下拉加载样式
	}, 1500);  //1500毫秒触发
}
//加载文章详情
function jsonarrfor(result){
//	_relation(result.relation,result.relation_id);//加载关联信息
	var classimg='';
	var vals='';
	var pic="";
		if(result.pic===null || result.pic==='' || result.pic==='undefined' ){
			pic='';
		}else{
			if(result.pic.indexOf(",")){//如果字符串里含有逗号。遍历分割
						var rpic=result.pic.split(",");
						var type=result.type.split(",");
				for(var ib=0;ib<rpic.length;ib++){//遍历图片
		pic+='<li id="con"><div class="pic"><span><img src="'+home.uploads+'/img/microblog/'+rpic[ib]+'.'+type[ib]+'" onerror="this.onerror=null;this.src=\'../datu.jpg\'" /></span></div></li>';
				}
			}else{//如果只有一个图片无需遍历
				pic='<li id="con"><div class="pic" ><span><img  src="'+home.uploads+'/img/microblog/'+result.pic+'.'+result.type+'" onerror="this.onerror=null;this.src=\'../../datu.jpg\'" /></span></div></li>';
			}
			}
				if(!result.headimg){
					headimg=home.uploads+"/img/user/a.jpg";
				}else{
					headimg=home.uploads+"/img/user/"+result.headimg;
				}
				detailstyle(headimg,result.id,result.username,result.refresh,result.content,pic,result.comment,result.zan,result.collect,result.report);//推送到样式函数
}
//加载关联信息
function _relation(result,relation_id){//关联模块
	var relation=400;
	
	if(result=='item'){
		relation='项目';
	};
	if(relation==400){return false;}
	document.getElementById('relation').innerHTML='<li onclick="goto(\''+result+'\',\'home\',\'detail\','+relation_id+')" class="relation"><span style=""><i class="fa fa-hand-o-right fa-fw"></i>进入'+relation+'页<i class="fa fa-hand-o-left fa-fw"></span></li>';
};
function detailstyle(headimg,tid,username,createtime,content,pic,comment,zan,collect,report){
	if(createtime==''){//如果时间不存在调用系统当前时间
		var createtime=new Date().format("yy-MM-dd/h:m");
	}else{
	var createtime=new Date(parseInt(createtime) * 1000).format('yyyy-MM-dd hh:mm:ss');//转换时间戳
	}
	vals='<li><div style="width:100%;height:50px;margin:3px;margin-bottom:15px"><img style="height:100%;padding:3px" src="'+headimg+'"/><div style="margin-top:-60px;margin-left:60px">'+username+'<p style="font-size:0.8em;line-height:160%">发布与：'+createtime+'<span  onclick="report('+tid+',\'microblog\',this)"  style="margin-left:5px;color:#6E6E6E">举报</span><span id="report">'+report+'</span></p></div></div><div class="size1"style="text-indent:40px;line-height:140%">'+content+'</div></li><div class="slide-box">'+pic+'</div><div style="width:100%;height:35px;font-size:0.8em;border-bottom: 1px solid #E3E3E3;text-align:center;"><div style="width: 33%;float:left"onclick="speak()">评论：<span id="commentnum">'+comment+' </span></div><div style="width: 33%; float:left"onclick="zan('+tid+',\'\',\'microblog\')"><i class="fa fa-thumbs-o-up fa-1x"></i>：<span id="zannum">'+zan+'</span></div><div style="width: 33%;float:left"onclick="collect('+tid+',\'microblog\')">收藏：<span id="collectnum'+tid+'">'+collect+'</span></div></div>';
	document.getElementById("neirong").innerHTML=vals;
}

//获取主题文章详情
apptoken['act']='detail';
apptoken['tid']=tid;
//alert(tid);
mui.post(home.hos+'/microblog?tid='+apptoken['tid']+'&act=detail',apptoken,function(data){
//	alert('服务器'+data);
	if(isJSON(data)){
		result=JSON.parse(data);//获取信息转json格式
	 		if(result.id){
		jsonarrfor(result);//加载详情信息
		_relation(result.relation,result.relation_id);//加载关联信息
		//获取评论信息,利用comment.js评论插件
	list_comment(tid,'microblog',0);
//		list_comment(result.id);//加载评论信息
		}else{
			alert(apptoken['tid']+'页面加载失败，或不存在，请重新尝试');
			return false;
    	}}else{
    		plus.ui.toast('数据不存在'+data);return false;
    	}
})
  </script>
 </body>
  </html>